<template>
  <Button @click="value = true" type="primary">发布朋友圈</Button>
<!--  <div style="height: 500px">-->
    <Scroll :on-reach-bottom="handleReachBottom" style="height: 500px">
      <Card dis-hover v-for="(item, index) in ringList" :key="index" style="margin: 32px 0"
            @click.native="enterDetail(item.ringId)">
        <Row>
          <Col>
            <Card :bordered="false">
              <template #title>
                <Row>
                  <Col>
                    <Avatar>USER</Avatar>
                  </Col>
                  <Col>
                    {{ item.userName }}
                  </Col>
                </Row>
              </template>
              <p>{{ item.content }}</p>
              <div v-if="item.hasRed">
                <Row>
                  <Col span="8">
                    <Icon type="md-bonfire" size="25"/>
                  </Col>
                  <Col span="16">
                    内有红包
                  </Col>
                </Row>
              </div>
              <Row>
                <Col>
                  {{ item.squareDate }}
                </Col>
                <Col>
                  点赞数:{{ item.starNum }}
                </Col>
              </Row>
            </Card>
          </Col>
        </Row>
      </Card>
    </Scroll>
<!--  </div>-->
  <Drawer
      title="Create"
      v-model="value"
      width="720"
      :mask-closable="true"
  >
    <div class="demo-drawer-footer">
      <Form :model="ringData" :label-width="80">
        <Input v-model="content" type="textarea" :rows="4" placeholder="Enter something..."/>
        <Select v-model="selectGroupList" multiple style="width:260px">
          <Option v-for="item in groupList" :value="item.value" :key="item.value">{{ item.groupName }}</Option>
        </Select>
        <Select v-model="expireDate" style="width:200px">
          <Option v-for="item in expireDataList" :value="item.value" :key="item.value">{{ item }}</Option>
        </Select>
        <Switch v-model="hasRed"/>
        <div v-if="hasRed">
          <InputNumber :max="200" :min="1" v-model="money"></InputNumber>
          <Slider v-model="totalSize"></Slider>
        </div>
      </Form>
      <Button type="primary" @click="postRing">Submit</Button>
    </div>
  </Drawer>
</template>
<script>

import axios from 'axios'
import router from '@/router'
import group from '@/store/group'

export default {
  data() {
    return {
      ringData: {},
      ringList: [],
      value: false,
      content: '',
      hasRed: false,
      groupList: group.groupList,
      selectGroupList: [],
      money: 0,
      totalSize: 0,
      expireDate: '',
      expireDataList: [
        '三天可见', '一个月可见', '永久可见'
      ]
    }
  },
  created() {
    const self = this
    axios({
      method: 'get',
      url: '/ring'
    }).then((result) => {
      console.log(result)
      for (let i = 1; i < result.data.length; i += 1) {
        self.ringList.push(result.data[i])
      }
    })
  },
  methods: {
    handleReachBottom() {
      return new Promise((resolve) => {
        console.log('yes')
        setTimeout(() => {
          const self = this
          axios({
            method: 'get',
            url: '/ring'
          }).then((result) => {
            console.log(result)
            for (let i = 1; i < result.data.length; i += 1) {
              self.ringList.push(result.data[i])
            }
          })
          resolve()
        }, 1000)
      })
    },
    enterDetail(ringId) {
      router.push({ name: 'RingDetail', params: { ringId } })
    },
    postRing() {
      this.value = false
      const self = this
      console.log(this.content)
      axios({
        method: 'post',
        url: '/ring',
        data: {
          content: this.content,
          groupList: this.groupList,
          expireDate: this.expireDate,
          hasRed: this.hasRed
        }
      }).then((result) => {
        console.log(result)
        axios({
          method: 'post',
          url: '/red',
          data: {
            money: self.money,
            size: self.size,
            ringId: result.data
          }
          // eslint-disable-next-line no-shadow
        }).then((result) => {
          console.log(result)
        })
      })
      this.visiable = false
      this.content = ''
    }
  }
}
</script>
